<template>
  <div>B组件内容吧
    <h2>watch:用来监听data中数据的变换/监听路由的改变,当数据发生
      变换之后,就会走watch的逻辑处理函数
      如果是引用类型监听不到,可以通过deep:true进行深度监听.还有一个immediate:true初始化监听
      如果单独监听对象的某一个属性,可以用字符串引起来使用.
      计算属性computed的函数名,不能和data中的同名. 是有缓存的,不能有异步
    </h2>
    <input type="text" v-model="num">{{ newNum }}
    <ul>
      <li v-for="(item, key) in student">{{ key }} <input v-model="student[key]" type="text"></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "B",
  components: {},
  props: {},
  data () {
    return {
      num: 1,
      student: {
        name: "lifei",
        age: 20,
        cardId: "",
        address: "中国"
      }
    }
  },
  // 计算属性的函数名,不能和data中的同名. 有缓存的
  // watch加一个定时器就可以，但是computed不行，计算属性是不能开启异步任务的
  computed: {
    newNum () {
      setTimeout(() => {
        //依赖哪些变量.响应式的数据
        console.log("执行computed")
        return this.num * 1 + 10
      }, 0)
    }
  },
  // 
  watch: {
    num () {
      console.log("触发执行")
    },
    ['student.cardId']: {
      handler () {
        console.log("触发student执行")
      },
      // deep: true,
      // immediate: true
    }
  },
  created () {
    var a = 4;
    console.log("B组件created")
  },
  activated () {
    console.log("B组件activated")
  },
  deactivated () {
    console.log("B组件deactivated")
  },
  destroyed () {
    console.log("B组件destroyed销毁期")

  }
}
</script>
<style scoped></style>